import {Component, OnInit} from '@angular/core';
import {OriginService} from "./origin.service";
import {Origin} from "./origin"
import {MsgResult} from "../../../models/msg-result";
import {ResponseUtil} from "../../../util/response-util";
import {LogUtil} from "../../../util/log-util";
import {Path} from "../../../portal/admin/admin-breadcrumb/breadcrumb";
import {PageSubject} from "../../../util/page-subject";
import {TableUtil} from "../../../util/table-util";
import {MsgConstants} from "../../../constants/constants";
import {OneDialogService} from "../../../widgets/one-dialog/one-dialog.service";

declare var $;

@Component({
  selector: 'app-origin',
  templateUrl: './origin.component.html',
  styleUrls: ['./origin.component.css']
})

export class OriginComponent implements OnInit {

  origin: Origin;
  message: string;
  lampblackList: any;

  table;

  constructor(
    private pageSubject: PageSubject,
    private dialogService: OneDialogService,
    private originService: OriginService,
    private responseUtil: ResponseUtil,
    private tableUtil: TableUtil,
    private logUtil: LogUtil
  )
  {
    this.origin = new Origin("", "", "", "");
  }

  //初始化页面数据
  ngOnInit() {
    this.pushPage();
    this.initConfig();
    this.initLampblackData();
    // this.visualizationLampblackData();
  }
  /**
   *  生成面包屑
   */
  private pushPage() {
    let path = new Path("数据表查询", null);
    this.pageSubject.pushPage("油烟设备数据", "", path);
  }

  /**
   * 时间插件
   */
  private initConfig() {
    $(".form_datetime").datetimepicker(
      {
        format: 'yyyy-mm-dd hh:ii',
        language: 'zh-CN',
        initialDate: new Date(),
        autoclose: true,
        todayBtn: true
      });

    $("#endTime").val(this.dateFormat(new Date(), "yyyy-MM-dd hh:mm"));
    let day1 = new Date();
    day1.setTime(day1.getTime()-60*60*1000);
    $("#startTime").val(this.dateFormat(day1, "yyyy-MM-dd hh:mm"));
  }

  /**
   * 对Date的扩展，将 Date 转化为指定格式的String
   * 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符，
   * 年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字)
   * 例子：
   * (new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423
   * (new Date()).Format("yyyy-M-d h:m:s.S")      ==> 2006-7-2 8:9:4.18
   * @param d
   * @param fmt
   * @returns {any}
   */
  private dateFormat (d,fmt) { //author: meizz
    let o = {
      "M+": d.getMonth() + 1, //月份
      "d+": d.getDate(), //日
      "h+": d.getHours(), //小时
      "m+": d.getMinutes(), //分
      "s+": d.getSeconds(), //秒
      "q+": Math.floor((d.getMonth() + 3) / 3), //季度
      "S": d.getMilliseconds() //毫秒
    };
    if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (d.getFullYear() + "").substr(4 - RegExp.$1.length));
    for (let k in o)
      if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
    return fmt;
  }


  //调用service查询数据
  initLampblackData() {
    this.origin.sites = $("#sites").val();
    this.origin.startTime = $("#startTime").val();
    this.origin.endTime = $("#endTime").val();
    this.originService.getLampblackData(this.origin).subscribe(
      result => this.responseUtil.success(result, this.generateSearch),
      message => this.responseUtil.error(message)
    );
  }

  //
  private generateSearch = (result:MsgResult) => {
    if (result && result.code == MsgConstants.MSG_CODE_OK) {
      this.lampblackList = result.data;
      this.visualizationLampblackData(this.lampblackList);
    }
    if (result && result.code != MsgConstants.MSG_CODE_OK) {
      this.dialogService.info(result.message);
    }
  }


  条件查询
  searchData() {
    this.table.bootstrapTable('destroy');
    this.table.bootstrapTable('refresh');
    this.initLampblackData();
  }

  /**
   *
   */
  visualizationLampblackData(datas){
    this.table = this.tableUtil.load('lampblack_monitor_id', {
  columns: [
    [
      // { field: 'index', title: '序号', rowspan: 2,  formatter:this.formatter,  valign: "middle", width: 30 },
      { field: 'beforeProcess.snCode', title: '设备编码', rowspan: 2, valign: "middle", align: "left",  halign: "center",  width: 50  },
      { field: 'beforeProcess.siteCode',  title: '站点编码',  rowspan: 2,  valign: "middle",  align: "left",  halign: "center",  width: 90  },
      { field: 'beforeProcess.receiveTime',  title: '接收时间',  sortable:true,  rowspan: 2, valign: "middle",  width: 90, align: "left",  halign: "center"  },
      {  field: ' ',  title: '处理前', colspan: 8,  width: 420 },
      { field: ' ',  title: '处理后', colspan: 8,  width: 420  }
    ],
    [
      {  field: 'beforeProcess.concentration',  title: '油烟浓度',  sortable:true, align: "right",   width: 40,  halign: "center"   },
      { field: 'beforeProcess.blowerState',  title: '风机状态',  align: "right", width: 40, halign: "center" ,formatter:this.blowerState },
      { field: 'beforeProcess.purifierState', title: '净化器状态',   align: "right",  width: 40,  halign: "center"  ,formatter:this.purifierState},
      { field: 'beforeProcess.cleanLiness',  title: '清洁度',  align: "right", width: 40, halign: "center"  ,formatter:this.cleanLiness },
      {  field: 'beforeProcess.syatemState',  title: '探头状态', align: "right",  width: 40, halign: "center" },
      {  field: 'beforeProcess.conlimit',  title: '浓度阀值',sortable:true, align: "right", width: 40, halign: "center" },
      {  field: 'beforeProcess.temp', title: '温度', sortable:true, align: "right",  width: 20,  halign: "center"  },
      {  field: 'beforeProcess.hum',  title: '湿度',  sortable:true,  align: "right", width:20, halign: "center" },

      {  field: 'afterProcess.concentration',  title: '油烟浓度',  sortable:true,  align: "right",   width: 40,   halign: "center" },
      {  field: 'afterProcess.blowerState',  title: '风机状态',  align: "right",  width: 40,  halign: "center" ,formatter:this.blowerState },
      {  field: 'afterProcess.purifierState',  title: '净化器状态',  align: "right",  width: 40,  halign: "center" ,formatter:this.purifierState},
      {  field: 'afterProcess.cleanLiness',   title: '清洁度',  align: "right",  width: 40,  halign: "center" ,formatter:this.cleanLiness},
      {  field: 'afterProcess.syatemState',  title: '探头状态',  align: "right",  width: 40,   halign: "center"  },
      {   field: 'afterProcess.conlimit', title: '浓度阀值', sortable:true,  align: "right", width: 40,  halign: "center" },
      {  field: 'afterProcess.temp',  title: '温度',  sortable:true, align: "right",  width: 20,  halign: "center" },
      {  field: 'afterProcess.hum',  title: '湿度', sortable:true,   align: "right",  width: 20,  halign: "center" }
    ]
  ],
    data: datas,
    pagination: true,
    paginationLoop: false,
    striped: true,
    paginationPreText: "上一页",
    paginationNextText: "下一页",
    undefinedText: "-",
    // height: $(window.innerHeight)[0] - 300,
    height: 750,
    pageSize: 15,
    pageList: [10, 15, 20]

  });
    this.tableUtil.bindResetTableView(this.table);
  }

  //格式化表格排名
  // formatter =(value,raw,index)=>{
  //   return `<span>${index+1}</span>`
  // }
  //格式化表格排名
  blowerState =(value,raw,index)=>{
    switch (value){
      case '0':
        return '开'
      case '1':
        return '关'
    }
  }

  //格式化表格排名
  purifierState =(value,raw,index)=>{
    switch (value){
      case '0':
        return '开'
      case '1':
        return '关'
    }
  }
  //格式化表格排名
  cleanLiness =(value,raw,index)=>{
    switch (value){
      case '1':
        return '清洁'
      case '2':
        return '较清洁'
      case '3':
        return '脏'
      case '4':
        return '较脏'
      case '5':
        return '极脏'
    }
  }





  //导出excel表格
  exportExcelData() {
    this.origin.sites = $("#sites").val();
    this.origin.startTime = $("#startTime").val();
    this.origin.endTime = $("#endTime").val();
    this.originService.exportExcelData(this.origin).subscribe(

    );
  }

}
